<template>
    <ul class="list" >
        <li class="item" 
        v-for="item of letters" 
        :key="item" 
        :ref="item"
        @touchstart.prevent = "handlTouchStart"
        @touchmove = "handlTouchMove"
        @touchend = "handlTouchEnd"
        @click="handleLetterClick">
        {{ item }}
        </li>
    </ul>
</template>

<script>
    export default {
        name:"Alphabet",
        props:{
            cities:Object,   
        },
        data(){
            return {
                touchStatus:false,
                startY:0,
                timer:null  //函数节流
            }
        },
        methods:{
            handleLetterClick(e){
                // console.log(e.target.innerText)
                this.$emit("change",e.target.innerText)
            },
            handlTouchStart(){
                this.touchStatus = true;
                
            },
            handlTouchMove(e){
                if(this.touchStatus){
                    //函数节流
                    //判断  清除计时器
                    if(this.timer){
                        clearTimeout(this.timer) 
                    }
                    this.timer = setTimeout(() => {
                        // console.log(this.$refs['A'][0])
                        // this.startY = this.$refs['A'][0].offsetTop;
                        // console.log(this.startY)    
                        //触摸位置到顶部的距离
                        // console.log(e.touches[0].clientY)
                        //触摸位置到组件顶部的距离
                        const  touchY = e.touches[0].clientY - 79;
                        //  当前所触位置与A字符的距离 / 20
                        const index = Math.floor((touchY-this.startY)/20)

                        //判断 触摸在下标为0-this.letter.length
                        if (index>=0 && index< this.letters.length) {
                            //子传父 把字符letters传给父组件
                            this.$emit("change",this.letters[index])
                        }
                    }, 100);
                }
                

            },
            handlTouchEnd(){
                this.touchStatus = false;
            },
        },
        computed:{
            //父组件传过来的数据  cities 转换为数组letters
            letters(){
                const letters = [];
                for(let i in this.cities){
                    // console.log(i)
                    letters.push(i)
                    // letters.push(this.cities[i])
                    // for (let index in this.cities[i]) {
                    //      letters.push(this.cities[i][index].name)     
                    // }
                }
                return letters
            }
        },
        updated(){
             this.startY = this.$refs['A'][0].offsetTop;
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/varibles.styl'
    .list
        display: flex
        flex-direction: column
        justify-content: center
        position: absolute
        top: 1.58rem
        right: 0
        bottom: 0
        width: .44rem
        // background :red
        .item
            line-height: .4rem
            text-align: center
            color: $bgColor
</style>